<template>
    <scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower" v-if="album.length > 0">
        <!-- swiper
            1、自动轮播 autoplay 默认5s，修改时间 interval
            2、指示器 indicator-dots

        -->
        <!-- 轮播图 开始 -->
        <view class="album_swiper">
            <swiper autoplay indicator-dots circular indicator-color="blue" indicator-active-color="red">
                <swiper-item v-for="(item,i) in banner" :key="i">
                    <img :src="item.thumb" alt="">
                </swiper-item>
            </swiper>
        </view>
        <!-- 轮播图 结束 -->

        <!-- 列表 开始 -->
        <view class="album_list">
            <navigator
                class="album_item"
                v-for="(item,i) in album" :key="i"
                :url="`/pages/album/index?id=${item.id}`"
            >
                <view class="album_img">
                    <img :src="item.cover" alt="" model="aspectFill">
                </view>
                <view class="album_info">
                    <view class="album_name">{{item.name}}</view>
                    <view class="album_desc">{{item.desc}}</view>
                    <view class="album_btn">
                        <view class="album_attention"> +关注</view>
                    </view>
                </view>
            </navigator>
        </view>
        <!-- 列表 结束 -->
    </scroll-view>
</template>

<script>
import goDetail from "@/components/goDetail";
export default {
    components: { goDetail },
    name: "home-album",
    data() {
        return {
            // 获取数据的参数
            params: {
                // 获取多少条数据
                limit: 30,
                order: 'new',
                // 跳过多少条
                skip: 0
            },
            // 轮播图列表
            banner: [],
            // 专辑列表
            album: [],
            // 条件是否还有分页
            hasMore: true
        }
    },
    onLoad() {},
    methods: {
        getList(params) {
            this.request({
                url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
                data: params
            }).then(result => {
                console.log(result);
                if (result.res.album.length === 0){
                    this.hasMore = false;
                    return;
                }
                if (this.banner.length === 0){
                    this.banner = result.res.banner;
                }
                this.album = [...this.album, ...result.res.album]
            })
        },
        handleToLower() {
            if (this.hasMore) {
                this.params.skip += this.params.limit;

                this.getList(this.params);
            }else {
                uni.showToast({
                    title: "没有数据了！",
                    icon: "none"
                })
            }
        }
    },
    mounted() {
        // 修改页面的标题
        uni.setNavigationBarTitle({
            title: "专辑"
        });
        // 获取 “专辑” 参数列表
        this.getList(this.params)
    }
}
</script>

<style scoped lang="scss">
    .album_scroll_view{
        height: calc( 100vh - 36px );
    }
    .album_swiper{
        swiper{
            height: calc(750rpx *284 / 640);
            img{
                height: 100%;
            }
        }
    }
    .album_list{
        padding: 10rpx;
        .album_item{
            padding: 10rpx 0;
            display: flex;
            border-bottom: 1rpx solid #ccc;
            .album_img{
                flex: 1;
                padding: 10rpx;
                img{
                    width: 200rpx;
                    height: 200rpx;

                }
            }
            .album_info{
                flex: 2;
                padding: 0 10rpx;
                /*
                overflow 属性规定当内容溢出元素框时发生的事情。
                    nowrap 换行
                */
                overflow: hidden;
                .album_name{
                    font-size: 30rpx;
                    color: #000;
                    padding: 10rpx 0;
                }
                .album_desc{
                    padding: 10rpx 0;
                    font-size: 24rpx;

                    /* 出现bug ：横向撑开宽度
                     解决办法在 上层view
                     */
                    text-overflow: ellipsis; /* 显示一行，剩余用...省略*/
                    overflow: hidden; /* 隐藏多余的 */
                    white-space: nowrap; /* 规定段落中的文本不进行换行： */
                }
                .album_btn{
                    padding: 10rpx;
                    display: flex;
                    justify-content: flex-end;
                    .album_attention{
                        color: $color;
                        border: 1rpx solid $color;
                        padding: 10rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
    }

</style>
